<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<!--状态栏占位-->
			<StatusTopBar></StatusTopBar>
			<view class="title">探索</view>
			<view class="search-container">
				<view class="search-input">
					<input type="text" placeholder="输入电台名称搜索" placeholder-class="placeholder" v-model="searchText" />
					<view class="search-input-loading" v-if="isSearching"></view>
				</view>
				<text class="search-clear" v-if='radioSearchStore.filteredList.length'
					@click.stop="clearSearchResults">取消</text>
				<button v-else='!radioSearchStore.filteredList.length' class="search-btn" size="mini">
					<uni-icons type="search" size="32rpx" color="#fff"></uni-icons>
				</button>
			</view>
		</view>

		<!-- 搜索结果列表-->
		<view class="suggestion" v-if="radioSearchStore.filteredList.length">
			<StatusTopBar></StatusTopBar>
			<SuggestionList />
		</view>

		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y>
			<!-- 精选电台 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">精选电台</text>
					<!-- <text class="section-more">更多</text> -->
				</view>
				<swiper class="swiper" circular autoplay interval=2000 duration=500>
					<swiper-item v-for="(item, index) in featuredList" :key="index" @click="playStation(item)">
						<view class="featured-item">
							<SafeImage class="featured-cover" :src="item.favicon" mode="aspectFill">
							</SafeImage>
							<text class="featured-name">{{ item.name }}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 中文专区 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">华语专区</text>
					<text class="section-more" @click="refreshChineseList">换一换</text>
				</view>
				<scroll-view class="collection-list" scroll-x>
					<view v-for="(item, index) in chineseList" :key="index" class="collection-item"
						@click="playStation(item)">
						<SafeImage class="collection-cover" :src="item.favicon" mode="aspectFill">
						</SafeImage>
						<text class="collection-name">{{ item.name }}</text>
					</view>
				</scroll-view>
			</view>
			<!-- 私人定制 -->
			<view class="section" v-if="privateList.length">
				<view class="section-header">
					<text class="section-title">私人定制</text>
					<!-- <text class="section-more">更多</text> -->
				</view>
				<scroll-view class="collection-list" scroll-x>
					<view v-for="(item, index) in privateList" :key="index" class="collection-item"
						@click="playStation(item)">
						<SafeImage class="collection-cover" :src="item.favicon" mode="aspectFill">
						</SafeImage>
						<text class="collection-name">{{ item.name }}</text>
					</view>
				</scroll-view>
			</view>
			<!-- 我的收藏 -->
			<view class="section" v-if="collectionList.length">
				<view class="section-header">
					<text class="section-title">我的收藏</text>
					<text class="section-more" @click="showFavotites">更多</text>
				</view>
				<scroll-view class="collection-list" scroll-x>
					<view v-for="(item, index) in collectionList" :key="index" class="collection-item"
						@click="playStation(item)">
						<SafeImage class="collection-cover" :src="item.favicon" mode="aspectFill">
						</SafeImage>
						<text class="collection-name">{{ item.name }}</text>
					</view>
				</scroll-view>
			</view>
			<!-- 最近常听 -->
			<view class="section" v-if="recentList.length">
				<view class="section-header">
					<text class="section-title">最近常听</text>
					<text class="section-more" @click="showHistories()">查看全部</text>
				</view>
				<view class="recent-list">
					<view v-for="(item, index) in recentList" :key="index" class="recent-item"
						@click="playStation(item)">
						<SafeImage class="recent-cover" :src="item.favicon" mode="aspectFill">
						</SafeImage>
						<view class="recent-info">
							<text class="recent-name">{{ item.name }}</text>
							<text class="recent-desc"></text>
						</view>
						<view @click.stop="playMore(item)"><uni-icons type="more-filled" size="40rpx"
								color="#B829F7"></uni-icons></view>
					</view>
				</view>
			</view>
			<!-- 随便听听 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">随便听听</text>
					<text class="section-more" @click="refreshRandomList()">换一换</text>
				</view>
				<view class="random-grid">
					<view v-for="(item, index) in randomList" :key="index" class="random-item"
						@click="playStation(item)">
						<SafeImage class="random-cover" :src="item.favicon" mode="aspectFill"></SafeImage>
						<view class="random-mask"></view>
						<text class="random-name">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<!-- 底部播放控制栏 -->
	<view class="bottom-player">
		<IcecastStatsFetcher :url="playerStore.currentRadio?.url" :playStatus="playerStore.status"
			@update="updateIcyData" />
		<BottomPlayer></BottomPlayer>
	</view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import { useStationStore } from '@/stores/useStationStore';
import { showHistories, showFavotites, showFullPlayer } from '@/common/station_api';
import type { IcyData, Station } from '@/common/types/interface';
import { usePlayerStore } from '@/stores/usePlayerStore';
import SuggestionList from '@/components/SuggestionList/SuggestionList.vue';
import { debounce } from 'lodash';
import { useRadioSearchStore } from '@/stores/useRadioSearchStore';
import IcecastStatsFetcher from '@/components/IcyFetcher/IcecastStatsFetcher.vue';
import StatusTopBar from '@/components/StatusTopBar/StatusTopBar.vue';
import BottomPlayer from '@/components/BottomPlayer/BottomPlayer.vue';

const stationStore = useStationStore();
const playerStore = usePlayerStore();
const featuredList = computed(() => {
	return stationStore.featuredList;
})
const chineseList = computed(() => {
	return stationStore.chineseList;
})
const privateList = computed(() => {
	return stationStore.privateList;
})
const collectionList = computed(() => {
	return playerStore.favorites.slice(0, 5)
})
const randomList = computed(() => {
	return stationStore.randomList;
});
const recentList = computed(() => {
	let res = [];
	let visited = new Set();
	for (let i = playerStore.histories.length - 1; i > -1 && res.length < 3; i--) {
		let { station } = playerStore.histories[i];
		if (!visited.has(station.stationuuid)) res.push(station);
		visited.add(station.stationuuid);
	}
	// console.log(res);
	return res;
})
const playStation = (item: Station) => {
	playerStore.switchStation(item);
}

const playMore = (item: Station) => {
	playerStore.switchStation(item);
	// setTimeout(() => {  }, 3000)
	showFullPlayer()
}

onMounted(() => {
	stationStore.fetchFeaturedStations();
	stationStore.fetchRandomStations();
	stationStore.fetchChineseStations();
})

const refreshChineseList = () => {
	stationStore.fetchChineseStations();
}

const refreshRandomList = () => {
	stationStore.fetchRandomStations();
}

const radioSearchStore = useRadioSearchStore();

const searchText = computed({
	get: () => radioSearchStore.searchText,
	set: (val) => radioSearchStore.searchText = val
});

const isSearching = ref(false);
const debouncedSearch = debounce((text: string) => {
	isSearching.value = true;
	radioSearchStore.resetQuery('search', { keyword: text }).then(() => {
		isSearching.value = false;
	})
}, 300);

watch(searchText, () => { debouncedSearch(searchText.value); });

const clearSearchResults = () => {
	console.log('清除搜索结果')
	radioSearchStore.clearResults();
}
const updateIcyData = ({ song, cover }: IcyData) => {
	playerStore.icyData = { song, cover };
};
</script>
<style>
page {
	height: auto;
	background: linear-gradient(135deg, #0B0B2B 0%, #1A1A4B 100%);
}
</style>
<style scoped>
.container {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
	/* padding: 30rpx; */
	/* padding-top: 180rpx; */
}

.header {
	position: sticky;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx 30rpx;
	background: rgba(11, 11, 43, 0.85);
	backdrop-filter: blur(10px);
	z-index: 100;
}

.title {
	font-size: 38rpx;
	font-weight: 700;
	background: linear-gradient(to right, #B829F7, #2C5DFF);
	-webkit-background-clip: text;
	color: transparent;
	margin-bottom: 20rpx;
}

.search-container {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.search-input {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
}

.search-input input {
	width: 100%;
	height: 64rpx;
	border-radius: 32rpx;
	padding-left: 24rpx;
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 28rpx;
}

.search-input-loading {
	position: absolute;
	right: 20rpx;
	top: 10rpx;
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #d502ff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.search-container text {
	color: white;
	font-size: 32rpx;
}

.search-clear {
	z-index: 101;
}

.search-btn {
	height: 64rpx;
	width: 64rpx;
	border-radius: 32rpx;
	background: linear-gradient(135deg, #B829F7 0%, #2C5DFF 100%);
	display: flex;
	justify-content: center;
	align-items: center;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.suggestion {
	/* position: absolute; */
	position: fixed;
	z-index: 100;
	/* top:150px; */
	top: calc(var(--window-top, 0) + 160rpx);
	/* 根据 header + search-container 高度微调 */
	left: 0;
	width: 100%;
	z-index: 99;
	padding: 20rpx 30rpx;
	/* background: rgba(0, 0, 0, 0.8); */
	/* border-top: 1px solid rgba(255, 255, 255, 0.1); */
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.25);
}

.section {
	margin: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	flex-direction: row;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #fff;
}

.section-more {
	font-size: 26rpx;
	color: #B829F7;
	/* padding-right: 60rpx; */
}

/* 精选电台 */
.featured-list {
	/* white-space: nowrap; */
}

.featured-item {
	display: flex;
	width: 100%;
	flex-direction: column;
}

.featured-cover {
	width: 100%;
	/* height: 240rpx; */
	border-radius: 16rpx;
	box-shadow: 0 0 20rpx rgba(184, 41, 247, 0.2);
}

.featured-name {
	font-size: 32rpx;
	color: #0deb2a;
	background-color: #fff;
	position: absolute;
	left: 30rpx;
	top: 30rpx;
}



/* 我的收藏 */
.collection-list {
	white-space: nowrap;
}

.collection-item {
	display: inline-block;
	width: 240rpx;
	margin-right: 20rpx;
}

.collection-cover {
	width: 240rpx;
	height: 240rpx;
	border-radius: 16rpx;
	box-shadow: 0 0 20rpx rgba(184, 41, 247, 0.2);
}

.collection-name {
	display: block;
	font-size: 24rpx;
	color: #fff;
	margin-top: 16rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 最近常听 */
.recent-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.recent-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 16rpx;
}

.recent-cover {
	width: 100rpx;
	height: 100rpx;
	border-radius: 12rpx;
	box-shadow: 0 0 20rpx rgba(184, 41, 247, 0.2);
}

.recent-info {
	flex: 1;
	margin-left: 20rpx;
}

.recent-name {
	display: block;
	font-size: 26rpx;
	color: #fff;
	margin-bottom: 8rpx;
}

.recent-desc {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

/* 随便听听 */
.random-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
}

.random-item {
	position: relative;
	overflow: hidden;
}

.random-cover {
	width: 100%;
	height: 280rpx;
	border-radius: 16rpx;
	box-shadow: 0 0 20rpx rgba(184, 41, 247, 0.2);
}

.random-mask {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
	z-index: 1;
}

.random-name {
	position: absolute;
	left: 20rpx;
	bottom: 20rpx;
	font-size: 32rpx;
	color: #fff;
	z-index: 2;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
	line-height: 1.4;
	max-height: 2.8em;
	/* 两行高度 */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* 限制为两行 */
	-webkit-box-orient: vertical;
}

.bottom-player {
	position: sticky;
	width: 100%;
	height: auto;
	bottom: var(--window-bottom, 0);
}
</style>